<style lang="less">
*{
  box-sizing: border-box;
}
.text-center{
  text-align: center!important;
}
.km-tab{
  background: #EFEFF4;
  color:#A9A9A9;
  font-size: 22px;
  padding-left: 20px!important;
  padding-right: 20px!important;
  border-bottom: 2px solid  #EFEFF4;
}
.bysc-td{
  height: 50px;
  background:#fff;
  transition: background .3s ease-in-out;
}
.status-base{
  display: block;
  height: 46px;
  line-height: 44px;
}
.status{
  width: 46px;
  border-radius: 23px;
  border:2px solid #ddd;
  color:#a8a8a8;
  margin:0 auto!important;
}
.border-rights{
  border-right:2px solid #f5f5f5!important;
}
.Xstatus{
  background:#EC681F;
  color:#fff;
  margin:0 auto;
  border:4px solid #EC681F;
  transition: background .3s ease-in-out;
}
.km-tab-active{
  border-bottom: 4px solid  #EC681F;
  transition: background .3s ease-in-out;
}
.Xbg{
  background:#FEF8F4;
  transition: background .3s ease-in-out;
}
.loading-mask{
  width:100vw;
  height:100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.6);
}
</style>
<template>
  <div class="wraps">
    <VTabs @onTabs='getData'></VTabs>
    <div class="flex">
      <div class="loading-mask" v-show='initStatus'></div>
      <div class="flex-item border-rights" style="flex:6;overflow:auto;min-height:100vh;">
        <table class="table">
          <tbody style="min-height:100vh">
            <tr>
              <td class="text-center km-tab" v-show='init'>行驶里程</td>
            </tr>
            <tr v-for='(itemName,i) in  serverList[activeItem]' :key='"map"+i'>
              <td><span class="status-base text-center" style="color:#575757">{{itemName}}</span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="flex-item" style="flex:11;overflow:auto;min-height:100vh;">
        <table class="table" style="width:auto;">
            <tbody style="min-height:100vh">
                <tr>
                    <td  @click='clickX(is)' :class='{"km-tab-active": is == nowIndex}' v-for='(d,is) in distanceList[activeItem]'  class="text-center km-tab" :key = 'is+"timePeriod"'>{{d+"KM"}}</td>
                </tr>
                <tr v-for='(itemName,i) in serverList[activeItem]' :key = 'i+"df"'>
                    <template v-for='(cx,it) in map[activeItem][itemName]'>
                        <td class="text-center bysc-td" :class='{Xbg:it == nowIndex}'>
                          <span class='status-base' :class="{status:cx.status.length>0,Xstatus:cx.status=='0'}">{{cx.status | handelStatus}}</span>
                        </td>
                    </template>
                </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
  import VTabs from './vbscTabs.vue'
  export default {
    mounted () {
      this.carsId = this.$route.query.carsId;
      this.getDatas(this.activeItem);
    },
    components:{
      VTabs
    },
    props:{
      mileage:{
      }
    },
    filters :{
        handelStatus: function(status){
            let statusDes = "";
            if(status == "0"){
                statusDes = "换"
            }else if(status == "1"){
                statusDes = "优"
            }else if(status == "2"){
                statusDes = "良"
            }else if(status == "3"){
                statusDes = "需要"
            };
            return statusDes
        }
    },
    data () {
      return {
        activeItem:"BYXM",
        init:false,
        initStatus:true,
        distanceList:{
            BYXM:[],
            WXXM:[],
            QXYH:[]
        },
        serverList:{
            BYXM:[],
            WXXM:[],
            QXYH:[]
        },
        map:{
            BYXM:{},
            WXXM:{},
            QXYH:{}
        },
        carsId:-999,
        nowIndex: -999,
      }
    },
    methods: {
      getData(index){
        if(index == 0){
          this.activeItem = "BYXM";
          this.getDatas("BYXM");
        }else if(index == 1){
          this.activeItem = "QXYH";
          this.getDatas("QXYH");
        }else if(index == 2){
          this.activeItem = "WXXM";
          this.getDatas("WXXM");
        }
      },
      clickX(i){
        this.nowIndex = i;
      },
      handleData(list,name){
        //分组
        let tmp = this.utils.groupBykey(list,"itemName");
        //获得服务项目
        this.serverList[name] = Object.keys(tmp);
        //获取所有距离并排序
        let distanceList = this.utils.sortNum(this.utils.getSingleStr(list,"distance"));
        this.distanceList[name] = distanceList;
        let distenList = this.distanceList[name];
        let aim = this.mileage;
        let nowCha = 99999999;
        let aimIndex = 0;
        distenList.map((time,index)=>{
          let cha = Math.abs(time-aim);
          if(cha<nowCha){
            nowCha = cha;
            aimIndex = index;
          }
        });
        this.nowIndex = aimIndex;
        //复制map,处理成完整数据
        let map = {};
        for(let o in tmp){
            map[o] = []
        };
        for(let o in map){
            distanceList.map(distance=>{
                map[o].push({
                    distance:distance,
                    status:""
                })
            })
        };
        //最后处理，获得需要的map数据
        for(let o in tmp){
            distanceList.map(distance=>{
              tmp[o].map(item=>{
                  if(item.distance === distance){
                      map[o].map(e=>{
                          if(e.distance === distance){
                              e.status = item.status;
                          }
                      })
                    }
                });
            });
        };
        this.map[name] = map;
        this.init = true;
        $loading.hide();
        this.initStatus = false;
      },
      getDatas(name){
        if(Object.keys(this.map[name]).length == 0){
          this.initStatus = true;
          $loading.show('拼命加载中..');
          this.get(Api.car.manual.get,{carsId:this.carsId,itemCat:name},(res)=>{
              let list = res.data.object || [];
              this.handleData(list,name);
          });
        };
      }
    }
  }
</script>

